<template>
  <el-col class="info-wrapper" :span="23">
    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">生产企业</span>
        <el-col class="row-content">
          <el-col class="col-content title-span" :span="6">工厂编号</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">组织人数</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">工厂名称</el-col>
          <el-col class="col-content" :span="18"><span>河北建工集团有限公司</span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">注册地址</el-col>
          <el-col class="col-content" :span="18"><span>石家庄</span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">通讯地址</el-col>
          <el-col class="col-content" :span="18"><span>石家庄</span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">生产地址</el-col>
          <el-col class="col-content" :span="18"><span>石家庄</span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">县/区级地址</el-col>
          <el-col class="col-content" :span="6"><span>北京市</span></el-col>
          <el-col class="col-content title-span" :span="6">县/区级代码</el-col>
          <el-col class="col-content" :span="6"><span>110000</span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">分公司</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">组织联系传真</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">联系人</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">联系人职务</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">联系人手机</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">联系人邮箱</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">法人</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">管理者代表</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" style="border-bottom: 1px solid #bbb;" :span="24">
          <el-col class="col-content title-span" :span="6">备注</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">项目信息</span>
        <el-table border :data="projectInfoData">
          <el-table-column
            prop="date"
            label="合同编号">
          </el-table-column>
          <el-table-column
            prop="date"
            label="委托人">
          </el-table-column>
          <el-table-column
            prop="date"
            label="生产者">
          </el-table-column>
          <el-table-column
            prop="date"
            label="生产企业">
          </el-table-column>
          <el-table-column
            prop="date"
            label="小类">
          </el-table-column>
          <el-table-column
            prop="date"
            label="产品名称">
          </el-table-column>
          <el-table-column
            prop="date"
            label="产品型号">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">证书信息</span>
        <el-table style="margin-bottom: 10px;" border :data="bookInfoData">
          <el-table-column
            prop="date"
            label="证书编号">
          </el-table-column>
          <el-table-column
            prop="date"
            label="发证日期">
          </el-table-column>
          <el-table-column
            prop="date"
            label="证书有效期至">
          </el-table-column>
          <el-table-column
            prop="date"
            label="换证日期">
          </el-table-column>
          <el-table-column
            prop="date"
            label="型号">
          </el-table-column>
          <el-table-column
            prop="date"
            label="状态">
          </el-table-column>
        </el-table>
        <el-col style="border: 1px solid #bbb;" :span="24">
          <el-col class="book-record">证书变更记录>></el-col>
          <el-col style="padding: 8px;">
            <div style="margin-bottom: 8px;">证书编号：2021172301000005</div>
            <el-table border :data="bookChangeInfoData">
              <el-table-column
                prop="date"
                label="变更类型">
              </el-table-column>
              <el-table-column
                prop="date"
                label="变更内容">
              </el-table-column>
              <el-table-column
                prop="date"
                label="变更日期">
              </el-table-column>
              <el-table-column
                prop="date"
                label="暂停到期">
              </el-table-column>
              <el-table-column
                prop="date"
                label="审批日期">
              </el-table-column>
              <el-table-column
                prop="date"
                label="备注">
              </el-table-column>
            </el-table>
          </el-col>
        </el-col>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">证书信息</span>
        <el-table border :data="bookExtInfoData">
          <el-table-column
            prop="date"
            label="证书编号">
          </el-table-column>
          <el-table-column
            prop="date"
            label="发证日期">
          </el-table-column>
          <el-table-column
            prop="date"
            label="到期时间">
          </el-table-column>
          <el-table-column
            prop="date"
            label="换证日期">
          </el-table-column>
          <el-table-column
            prop="date"
            label="中文型号">
          </el-table-column>
          <el-table-column
            prop="date"
            label="英文型号">
          </el-table-column>
          <el-table-column
            prop="date"
            label="状态">
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作">
            <el-link type="primary" style="margin-right: 8px;" @click="toEdit">编辑</el-link>
            <el-link type="primary" @click="change">变更</el-link>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">证书登记</span>
        <el-form ref="form" :model="form" label-width="180px">
          <el-col :span="24">
            <el-form-item label="证书编号：" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发证日期：" required>
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书有效期至：" required>
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
              <el-link style="margin-left: 6px;" type="primary" :underline="false">(默认)</el-link>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首次获证日期：">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
              <el-link style="margin-left: 6px;" type="primary" :underline="false">(默认)</el-link>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认证标志：">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否换证：">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原注册号：">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原颁证机构：">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="换证日期：">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="换证原因：">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="产品标准：">
              <span>GB 3836.2-2010</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="委托人：" required>
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="委托人(英文)：">
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="委托人注册地址：" required>
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="委托人注册地址(英)：">
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产者：" required>
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产者(英)：">
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产者注册地址：" required>
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产者注册地址(英)：">
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产企业：" required>
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产企业(英)：">
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产企业注册地址：" required>
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产企业注册地址(英)：">
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="产品名称(中文)：">
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="产品名称(英文)：">
              <el-input type="text" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="产品描述(中文)：" required>
              <el-input type="textarea" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="产品描述(英文)：">
              <el-input type="textarea" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input type="textarea" v-model="value1" style="width: 800px"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-button class="save-btn" type="primary">保存</el-button>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<script>
export default {
  name: 'certificateDetail',
  data() {
      return {
        tableData: [{date: 123}]
      };
  },
  mounted() {
      
  },
  methods: {

  },
};
</script>

<style lang="less" scoped>
.info-wrapper {
  font-family: Source Han Sans CN;
  font-weight: 400;
  height: 100%;
  
  .tabs-card {
    margin-bottom: 15px;
  }

  .row-content {
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
  }

  .title-span {
    text-align: center;
    background-color: #f0f5f8;
    justify-content: end;
    padding-right: 20px;
  }

  .col-content {
    min-height: 40px;
    border-right: 1px solid #bbb;
    padding-left: 4px;
    display: flex;
    align-items: center;
  }

  .book-record {
    border-bottom: 1px solid #bbb;
    height: 25px;
    padding-left: 8px;
  }
}

.save-btn {
  width: 80px;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>